<link rel="stylesheet" type="text/css" href="<?=base_url('assets/css/fileuploader.css')?>">
<script type="text/javascript" src="<?=base_url('assets/js/fileuploader.js')?>"></script>
<link rel="stylesheet" type="text/css" href="<?=base_url('assets/css/jquery.Jcrop.min.css')?>">
<script type="text/javascript" src="<?=base_url('assets/js/jquery.Jcrop.min.js')?>"></script>

<script type="text/javascript">
	jQuery(function(){
		jQuery('#jcrop_target').Jcrop({
			onChange: showPreview,
			onSelect: showPreview			
		});
		// jQuery('#width').html(jQuery('#jcrop_target').width() + 'px');
		// jQuery('#height').html(jQuery('#jcrop_target').height() + 'px');
	});
	function showPreview(coords){
		var rx = 00 / coords.w;
		var ry = 00 / coords.h;
		jQuery('#jcrop_target')
		var ratio = jQuery('#width').val()/jQuery('#jcrop_target').width();
		jQuery('#selectWidth').html(coords.w*ratio + 'px');
		jQuery('#selectHeight').html(coords.h*ratio + 'px');
		jQuery('#x').val(coords.x * ratio);
		jQuery('#y').val(coords.y * ratio);
		jQuery('#w').val(coords.w * ratio);
		jQuery('#h').val(coords.h * ratio);
		
		// $('#preview').css({
			// width: Math.round(rx * 500) + 'px',
			// height: Math.round(ry * 370) + 'px',
			// marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			// marginTop: '-' + Math.round(ry * coords.y) + 'px'
		// });
	}
	function checkCoords(){
		if (parseInt(jQuery('#w').val())>0) return true;
		alert('Chưa chọn vùng để Crop.');
		return false;
	}
</script>
<div class="page-header">
	<h>Upload Images <small></small></h>
</div>
<div class="row">
	<div class="span2">		
		<div id="file-uploader" class="text-center"></div>
	</div>
	<div style="clear:both"></div>
		<script type="text/javascript">        
			jQuery(function(){
				var tmp = new qq.FileUploader({
					element: document.getElementById('file-uploader'),
					action: "<?php echo base_url('upload/upload_files');?>",
					allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
					multiple	: true,
					debug: false,
					template:   '<div class="qq-uploader">' +
						'<div class="qq-upload-drop-area"><span>{dragText}</span></div>' +
						'<div class="qq-upload-btn"><input type="button" name="btn_image" value="Upload ảnh" alt="image" title="Upload nhiều hình để tạo album ảnh" class="btn btn-default"><img class="loading hide" src="/assets/css/loading.gif"/><span id="filename" class="hide"></span></div>' +
						'<ul class="qq-upload-list hide"></ul>' +
						'</div>',
					fileTemplate: '<li class="avatar">' +
						'<span class="avatar qq-progress-bar"></span>' +
						'<span class="qq-upload-spinner"></span>' +
						'<span class="avatar qq-upload-finished"></span>' +
						'<span class="avatar qq-upload-file"></span>' +
						'<span class="avatar qq-upload-size"></span>' +
						'<a class="avatar qq-upload-cancel btn btn-danger" href="#">{cancelButtonText}</a>' +
						'<span class="avatar qq-upload-failed-text alert alert-danger">{failUploadtext}</span>' +
						'</li>',
					classes: {
						// used to get elements from templates
						button: 'qq-upload-btn',
						list: 'qq-upload-list',
						drop: 'qq-upload-drop-area',
						progressBar: 'qq-progress-bar',
						file: 'qq-upload-file',
						spinner: 'qq-upload-spinner',
						finished: 'qq-upload-finished',
						size: 'qq-upload-size',
						cancel: 'qq-upload-cancel',
						success: 'qq-upload-success',
						fail: 'qq-upload-fail',
						successIcon: null,
						failIcon: null,
					},
					showMessage: function(message){
						alert(message);
					},
					onError: function(id, fileName, xhr){
						console.log(xhr);
					},
					onProgress: function(id, fileName, loaded, total){
						jQuery('.loading').removeClass('hide');
						jQuery('#filename').html(fileName + ', '+Math.round(loaded*00/total)+'%');
					},
					onComplete: function(id, fileName, responseJSON){
						var img = responseJSON;
						var html = '<li>';
						html += '<img class="img-thumbnail" src="';
						html += '/assets/timthumb.php?w=80&src=/uploads/images/full/'+img.filename;
						html += '"/>';
						html += '<a href="<?=base_url('admin/media/form')?>/'+img.media_id+'">Edit</a> | <a href="<?=base_url('admin/media/delete')?>/'+img.media_id+'">Delete</a>';
						html += ' | <input type="text" value="'+img.url+'"/>';
						html += '</li>';
						jQuery('.image-list').append(html);
						jQuery('.loading').addClass('hide');
					}
				});
			});
		</script>
		<ul class="image-list"></ul>
		<a href="base_url('admin/media')" class="btn btn-default">Back</a>
</div>